<template>
	<div class="coupon">
		<div class="coupon-nowrap">
			<div class="item flex" v-for="(item, index) in datas.couponList" :key="index" :style="itemStyle(datas.fill)" :class="'coupon-' + datas.mode">
				<div class="coupon-1-item" v-if="datas.mode === 1">
					<div>
						<div class="amount">{{ item.buy }}<span>元</span></div>
						<div class="amount-text mb6">{{ item.discountContentView }}</div>
						<div class="time">有效期：{{ item.couponValidPeriodContent }}</div>
					</div>
					<div>
						<div class="btn" :style="btnStyle(datas.button)">立即领取</div>
						<div class="stock">
							仅剩 <span>{{ item.offerStack }} </span>张
						</div>
					</div>
				</div>

				<div class="coupon-2-item" v-if="datas.mode === 2">
					<div>
						<div class="amount">{{ item.buy }}<span>元</span></div>
						<div class="amount-text mb6">{{ item.discountContentView }}</div>
						<div class="stock">
							仅剩<span>{{ item.offerStack }} </span> 张
						</div>
					</div>
					<div>
						<div class="btn" :style="btnStyle(datas.button)">立即领取</div>
					</div>
				</div>

				<div class="coupon-3-item" v-if="datas.mode === 3">
					<div class="amount mt20">{{ item.buy }}<span>元</span></div>
					<div class="amount-text mb6">{{ item.discountContentView }}</div>
					<div class="btn mt10" :style="btnStyle(datas.button)">立即领取</div>
				</div>
			</div>
		</div>

		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="coupon">
import { color } from 'echarts';
import { STATIC_URL } from '/@/utils/config';
import { ref, computed } from 'vue';

const name = ref();

const props = defineProps({
	datas: {},
});

const itemStyle = computed(() => (item) => {
	return {
		padding: '0px',
		flexShrink: '0',
		color: item.color ? item.color : undefined,
		background: item.bgImage ? `url(${STATIC_URL + item.bgImage}) no-repeat center center / cover` : undefined,
	};
});

const btnStyle = computed(() => (item) => {
	console.log('buton: bgColor : ', item);
	return {
		color: item.color ? item.color : undefined,
		'background-color': item.bgColor ? item.bgColor : undefined,
	};
});
</script>

<style scoped lang="scss">
.coupon {
	position: relative;
	min-height: 50px;
}

.coupon-1 {
	width: 90%;
}

.coupon-2 {
	width: 50%;
}

.coupon-3 {
	width: 33.33%;
}
.coupon .coupon-1-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px 0 20px;
	height: 80px;
	width: 100%;
}

.coupon .coupon-2-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	padding: 0 10px 0 20px;
	height: 80px;
	width: 100%;
}

.coupon .coupon-1-item .btn {
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	text-align: center;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

.coupon .coupon-1-item .stock {
	font-size: 12px;
	font-weight: 500;
	text-align: center;
}
.coupon-nowrap {
	display: flex;
	flex-wrap: nowrap;
	margin: 0px;
	// overflow: hidden;
	overflow-x: auto;
}

.coupon .coupon-1-item .amount-text {
	font-size: 12px;
	font-weight: 500;
}

.coupon .coupon-1-item .amount {
	font-size: 24px;
}

.coupon .coupon-1-item .time {
	font-size: 12px;
	/* margin-top: 4px; */
}

.coupon .coupon-2-item .amount {
	font-size: 24px;
}

.coupon .coupon-2-item .amount-text,
.coupon .coupon-2-item .stock {
	font-size: 12px;
	font-weight: 500;
}

.coupon .coupon-2-item .btn {
	width: 20px;
	height: fit-content;
	padding: 4px 0;
	text-align: center;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	flex-direction: column;
}

.coupon .coupon-3-item {
	width: 100%;
	height: 146px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.coupon .coupon-3-item .amount {
	font-size: 25px;
	font-weight: 600;
}

.coupon .coupon-3-item .amount-text {
	width: 80px;
	height: 36px;
	line-height: 18px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
}

.coupon .coupon-3-item .btn {
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	text-align: center;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}
</style>
